<template>
	<div class="header">
		<a class="header-l" href="#">
			<img src="../../assets/logo.png" />
			<span>后台管理</span>
		</a>
		<div class="header-r dropdown">
			欢迎<em>admin</em>登录<span class="fa fa-caret-down"></span>
			<div class="dropdown-son">
				<a class="dropdown-son-box" href="javascript:;"><span class="fa fa-power-off"></span>退出</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"v-header"
	}
</script>

<style>
	.header {
		height: 68px;
	}
	
	.header-l {
		float: left;
		display: block;
		margin-top: 10px;
		margin-left: 40px;
	}
	
	.header-l span {
		font-size: 20px;
		font-weight: bold;
		color: #000;
	}
	
	.header-l img {
		height: 36px;
		position: relative;
		top: 8px;
		margin-right: 10px;
	}
	
	.header-r {
		font-size: 14px;
		color: #9c9c9c;
		margin-top: 24px;
		margin-right: 24px;
		float: right;
		cursor: pointer;
	}
	
	.header-r em {
		color: #01aaed;
	}
	
	.header-r .fa {
		margin-left: 4px;
	}
	
	.dropdown {
		position: relative;
	}
	
	.dropdown-son {
		width: 160px;
		border: 1px solid #ddd;
		position: absolute;
		right: 0;
		top: 32px;
		background: #fff;
	}
	
	.dropdown-son:before {
		position: absolute;
		display: block;
		content: "";
		width: 0;
		height: 0;
		border: 8px dashed transparent;
		z-index: 1;
		border-bottom-style: solid;
		border-width: 0 8px 8px;
		border-bottom-color: #ddd;
		right: 0;
		top: -8px;
	}
	
	.dropdown-son-box {
		height: 42px;
		width: 100%;
		display: block;
		line-height: 42px;
		color: #96a5aa;
		padding-left: 10px;
	}
	
	.dropdown-son-box .fa {
		margin-right: 4px;
	}
</style>